<template>
  <div class="table-container">
    <el-card shadow="never" class="mt-1">
      <template #header>
        <h3 class="font-bold">基础表格</h3>
      </template>
      <TableDemo1 />
    </el-card>
    <el-card shadow="never" class="mt-1">
      <template #header>
        <h3 class="font-bold">可编辑表格</h3>
      </template>
      <TableDemo2 />
    </el-card>
    <el-card shadow="never" class="mt-1">
      <template #header>
        <h3 class="font-bold">Element plus虚拟化表格</h3>
      </template>
      <TableDemo3 />
    </el-card>
    <el-card shadow="never" class="mt-1">
      <template #header>
        <h3 class="font-bold">描述列表</h3>
      </template>
      <TableDemo4 />
    </el-card>
    <el-card shadow="never" class="mt-1">
      <template #header>
        <h3 class="font-bold">合并行列</h3>
      </template>
      <TableDemo5 />
    </el-card>
  </div>
</template>
<script setup>
import TableDemo1 from "./components/tabledemo1.vue";
import TableDemo2 from "./components/tabledemo2.vue";
import TableDemo3 from "./components/tabledemo3.vue";
import TableDemo4 from "./components/tabledemo4.vue";
import TableDemo5 from "./components/tabledemo5.vue";
</script>
<style scoped lang="scss">
.table-container {
  position: relative;
  padding: 24px;
}
</style>
